<template>
  <div
    class="self-dept-cascader"
    :style="{ width: width !== '' ? width : 'auto' }"
  >
    <!-- 部门展示 -->
    <el-tooltip
      class="item"
      effect="dark"
      :content="names ? names : '请选择'"
      placement="top"
    >
      <div @click="showSelectDialog()">
        <el-input
          :class="{ disabled: disable }"
          v-model="names"
          :style="{ width: width !== '' ? width : 'auto' }"
          :disabled="isEdit"
          :placeholder="placeholder"
        />
        <svg-icon class-name="edit-svg" icon-class="edit" />
      </div>
    </el-tooltip>
    <!-- 部门选择工具 -->
    <DeptSelect
      v-if="visible"
      v-model:visible="visible"
      v-model:nav="parentList"
      v-model:dept="dept"
      v-model:info="currentInfo"
      @save-select="selectChange"
    />
  </div>
</template>

<script>
import { getOrgTree, getTreeLink } from "@/api/system";
import DeptSelect from "./DeptSelect.vue";
export default {
  name: "DeptFormSelect",
  components: {
    DeptSelect,
  },
  props: {
    dept: {
      type: String,
      default: null,
    },
    type: {
      // 1 全量 0 本部门下
      type: Number,
      default: 1,
    },
    placeholder: {
      type: String,
      default: "筛选组织",
    },
    name: {
      type: String,
      default: "",
    },
    emitPath: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      props: {},
      cascaderOption: [],
      cascaderOrginOption: [],
      deptId: [],
      visible: false,
      names: null,
      parentList: [],
      currentInfo: {},
    };
  },
  watch: {
    dept(val) {
      this.checkIfNeedFormatDeptInfo(val);
    },
  },
  mounted() {
    console.log(this.isEdit);
    setTimeout(() => {
      this.checkIfNeedFormatDeptInfo(this.dept);
    }, 0);
  },
  methods: {
    initDeptInfo() {
      this.deptId = [];
      this.names = null;
      this.currentInfo = {};
      this.parentList = [];
    },

    checkIfNeedFormatDeptInfo(val) {
      if (val) {
        this.getDeptIdArr(val);
      } else {
        this.initDeptInfo();
      }
    },
    // 展示选择框弹窗
    showSelectDialog() {
      if (!this.disable) {
        if (this.dept) {
          this.getDeptIdArr(this.dept);
        }
        setTimeout(() => {
          this.visible = true;
        }, 100);
      }
    },
    // 获取该组织链上的相关内容
    async getDeptIdArr(id) {
      const res = await getTreeLink(id);
      const parent = res.data.reverse();
      const idsArr = [...this.getParamsArr([], parent, "id")];
      const nameArr = [...this.getParamsArr([], parent, "name")];
      this.deptId = idsArr;
      this.names = nameArr.join("/");
      this.currentInfo = parent[parent.length - 1]; // 当前组织的信息
      parent.pop(); // 删除最后一个(当前组织)
      this.parentList = [...parent]; // 所有父级的面包屑
    },
    // 处理数据 获得相应的数组
    getParamsArr(res, arr, name) {
      arr.map((item) => {
        name ? res.push(item[name]) : res.push(item);
      });
      return res;
    },
    resFun(response) {
      const { status, data } = response;
      if (status === 200) {
        this.cascaderOption = data;
        this.cascaderOrginOption = data;
      } else {
        this.cascaderOption = [];
        this.cascaderOrginOption = [];
      }
    },
    selectChange(val) {
      this.$emit("update:dept", val);
    },
  },
};
</script>

<style scoped lang="scss">
.cascader-container {
  display: inline-block;
}
.el-cascader-panel {
  height: 300px;
}
.el-radio-group {
  width: 100%;
}
.self-dept-cascader {
  display: inline-block;
  // margin-right: 10px;
  position: relative;
  .el-input {
    width: 200px;
    cursor: pointer;
    :deep(.el-input__inner) {
      padding-right: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    &.disabled {
      cursor: not-allowed;
      :deep(.el-input__inner) {
        color: #666;
        cursor: not-allowed;
      }
    }
  }
  .edit-svg {
    position: absolute;
    top: 9px;
    right: 10px;
    color: #ccc;
    width: 16px;
    height: 16px;
  }
}
</style>
